<template>
  <div>
  <div class="page-header">
    <h2>历史信息</h2>
  </div>
  <a-card class="page-container">
    <div class="filters">
      <a-space direction="vertical" :size="12">
        <el-date-picker v-model="range" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD" time-format="HH:mm:ss" @change="handleDateChange" />
      </a-space>
      <a-space>
        <div>
          <a-radio-group v-model:value="radioValue" @change="onRadioChange">
            <a-radio :value="1">自选</a-radio>
            <a-radio :value="2">5分钟</a-radio>
            <a-radio :value="3">10分钟</a-radio>
            <a-radio :value="4">30分钟</a-radio>
            <a-radio :value="5">1小时</a-radio>
            <a-radio :value="6">6小时</a-radio>
            <a-radio :value="7">24小时</a-radio>
            <a-radio :value="8">昨天</a-radio>
            <a-radio :value="9">前天</a-radio>
          </a-radio-group>
        </div>
      </a-space>
    </div>
    <a-card title="CPU使用率" :bordered="true" style="width: 100%" class="online-vms">
      <HisCoreUsage :resData="resData"></HisCoreUsage>
    </a-card>
    <a-card title="内存使用率" :bordered="true" style="width: 100%" class="online-vms">
      <HisMemUsage :resData="resData"></HisMemUsage>
    </a-card>
    <!-- <a-card title="测试图-未来删除" :bordered="true" style="width: 100%" class="online-vms">
      <HisTest :resData="resData"></HisTest>
    </a-card> -->

  </a-card>

</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import moment from 'moment';
import { getindexsByTimes } from '@/apis/indexApis'
import HisCoreUsage from '@/components/HisCoreUsage.vue'
import HisMemUsage from '@/components/HisMemUsage.vue'
import HisTest from '@/components/HisTest.vue'


const resData = ref({});
const radioValue = ref(1);
const range = ref([moment().subtract(10, 'minutes').toDate(), moment().toDate()]);
const updateRange = () => {
  const now = moment();
  let end = moment();

  let start;
  switch (radioValue.value) {
    case 2:
      start = now.subtract(5, 'minutes');
      break;
    case 3:
      start = now.subtract(10, 'minutes');
      break;
    case 4:
      start = now.subtract(30, 'minutes');
      break;
    case 5:
      start = now.subtract(1, 'hours');
      break;
    case 6:
      start = now.subtract(6, 'hours');
      break;
    case 7:
      start = now.subtract(24, 'hours');
      break;
    case 8:
      start = end.subtract(1, 'days').startOf('day');
      end = now.startOf('day');
      break;
    case 9:
      start = now.subtract(2, 'days').startOf('day');
      end = end.subtract(1, 'days').startOf('day');
      break;
    default:
      return;
  }
  range.value = [start.toDate(), end.toDate()];
  fetchParams();
};


const handleDateChange = (value) => {
  fetchParams(value);
};
const onRadioChange = () => {
  updateRange();
};

const fetchParams = async () => {
  getindexsByTimes({
    startTime: moment(range.value[0]).format('YYYY-MM-DDTHH:mm:ss'),
    endTime: moment(range.value[1]).format('YYYY-MM-DDTHH:mm:ss')
  }).then(res => {
    console.log("res111", res)
    resData.value = res
  })
};

onMounted(() => {
  fetchParams();
});
</script>

<style scoped>
.page-header {
  margin: 8px 10px;
}

.page-container {
  margin: 8px 10px;
  min-height: 80vh;
}
</style>
